<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>tab效果</title>
        <script src="../js/jquery-1.11.1.js"></script>
        <style>
            .tab{
                bord er: 1px solid red;
                width: 200px;
                margin-left: 300px;
                margin-top: 100px;
            }
            button{
                padding: 12px;
            }
            #t1{
                background-color: #ffd70b;
            }
            #t2{
                background-color: #e3e1e2;
            }
            #t3{
                background-color: #e3e1e2;
            }
            #context{
                width: 400px;
                height: 300px;
                background-color: #ffd70b;
                text-align: center;
                font-size: 20px;
                line-height: 300px;
                margin-left: 300px;
            }
        </style>
    </head>
    <body>
        <div class="tab">
        <button id="t1">tab01</button>
        <button id="t2">tab02</button>
        <button id="t3">tab03</button>
        </div>
        <div id="context">
            <p id="c1" style="display: block;">tab文字内容一</p>
            <p id="c2" style="display: none;">tab文字内容二</p>
            <p id="c3" style="display: none;">tab文字内容三</p>
        </div>
        
        <script>
            $("#t2").click(function(){
                $("#t2").css("background-color","#ffd70b");
                $("#t2").siblings().css("background-color","#e3e1e2");
                $("#c2").css("display","block");
                $("#c2").siblings().css("display","none");
            });
            $("#t3").click(function(){
                $("#t3").css("background-color","#ffd70b");
                $("#t3").siblings().css("background-color","#e3e1e2");
                $("#c3").css("display","block");
                $("#c3").siblings().css("display","none");
            });
            $("#t1").click(function(){
                $("#t1").css("background-color","#ffd70b");
                $("#t1").siblings().css("background-color","#e3e1e2");
                $("#c1").css("display","block");
                $("#c1").siblings().css("display","none");
            });
        </script>
    </body>
</html>